$.extend({ tabComp: {} });
$.extend($.tabComp, {
  layFilter: "filter",
  init() {
    this.element = layui.element;
    this.initTabPage(); //初始化头部tab切换界面
    this.initAllTabTitle(); //创建所有的tab标题头
    this.initEvent(); //初始化事件
  },
  initAllTabTitle() {
    for (let key in experimentData) {
      if (key !== "firstPage") {
        this.tabAdd({ title: experimentData[key].tabTitle, id: key });
      }
    }
  },
  //添加tab
  tabAdd(data) {
    var title = data.title;
    var title = title.length > 30 ? `${title.slice(0, 20)}...${title.slice(-10)}` : title;
    this.element.tabAdd(this.layFilter, {
      title: title,
      content: data.content || "", //内容是实验 todo:暂时没用到
      id: data.id, // 实际使用一般是规定好的id，这里以时间戳模拟下
    });
  },
  //切换tab
  tabChange(layid) {
    if (this.isHaveTab(layid)) {
      this.element.tabChange(this.layFilter, layid);
    } else {
      this.tabAdd({ title: experimentData[layid]?.tabTitle, id: layid });
      this.selectTab(layid);
    }
  },
  //是否有当前tab
  isHaveTab(layid) {
    var sign = false;
    $(".layui-tab-title li").each(function () {
      let id = $(this).attr("lay-id");
      if (layid == id) {
        sign = true;
      }
    });
    return sign;
  },
  //前端选中tab
  selectTab(id) {
    $(".layui-tab-title li").siblings().removeClass("layui-this");

    $(".layui-tab-title li").each(function () {
      let layid = $(this).attr("lay-id");
      if (layid == id) {
        $(this).addClass("layui-this");
      }
    });
  },
  getTabSelectLayid() {
    let selectTab = $(".layui-tab-title li.layui-this");
    return selectTab.attr("lay-id");
  },
  initEvent() {
    var that = this;
    // tab 切换事件
    this.element.on(`tab(${this.layFilter})`, function (data) {
      // console.log(this); // 当前 tab 标题所在的原始 DOM 元素
      // console.log(data.index); // 得到当前 tab 项的所在下标
      // console.log(data.elem); // 得到当前的 tab 容器
      var layId = $(this).attr("lay-id");
      that.createTabPage(layId);
    });
    // tab 删除事件
    this.element.on(`tabDelete(${this.layFilter})`, function (data) {
      let curTabLayId = that.getTabSelectLayid();
      var delLayId = $(this).attr("lay-id");
      if (curTabLayId === delLayId) {
        that.tabChange("firstPage"); //当你选中首页的时候，他会默认走tab chang的方法了
      }
    });
  },
  //切换或者创建一个tab界面
  createTabPage(id) {
    $(".app-canvas").each(function () {
      $(this).addClass("hide");
    });
    if (appObj[id]) {
      $(`#${id}`).removeClass("hide");
      window.app = appObj[id];
    } else {
      $(".tab-content").append(`<div id="${id}" class="app-canvas"></div>`);
      window.app = new Rainier.UI.V2.Application();
      var draw2dEditor = new Rainier.UI.V2.AppExperimentCanvasComponent(app, $(`#${id}`));
      app.registerViewComponent({ APP_VIEW_COMPONENT_CANVAS: draw2dEditor });
      appObj[id] = app;

      app.buildGUI();
      app.setContextActiveEditor(draw2dEditor.getDraw2DEditor());

      this.initCanvas(id);
    }
    $.outer.scrollToViewCenter();
  },
  //点击画布的元器件 有子实验的元器件 走这里
  tabSelectionHandle(id) {
    this.tabChange(id);
    this.createTabPage(id);
  },

  initCanvas(id, scrollCb) {
    // $.loading.open();
    var context = window.app.getContext();
    var activeEditor = context.getActiveEditor();
    var expActiveJson = experimentData[id].json || experimentData[id];
    //先清空试验台
    context.clearTable();
    //回显
    expActiveJson && activeEditor.doRestore(expActiveJson);
    scrollCb ? scrollCb() : $.outer.scrollToViewCenter(); //把画布重新滚动到中间位置（由于在其他tab界面下，会移动画布）
    // $.loading.close();
  },
  initTabPage() {
    var eleDom = `
          <div id="layui-tab" class="layui-tab" lay-filter="${this.layFilter}" lay-allowclose="true">
            <ul class="layui-tab-title">
              <li class="layui-this" lay-id="firstPage">首页</li>
            </ul>
        </div>`;
    $("#app").append(eleDom);
    this.element.render("tab", "filter");
  },
});
